<template>
  <div class="Manage">
    <Header :zIndex="3" ref="Header"></Header>
    <div class="content-wrap">
      <center>
        <div class="top">
          <ul class="daohang_list">
            <li>
              <router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link>
            </li>
            <li>
              <router-link class="list_item on" :to="{ path: '/Manage' }">投票管理</router-link>
            </li>
            <li>
              <router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link>
            </li>
            <li>
              <router-link class="list_item" :to="{ path: '/Userinfo' }">个人中心</router-link>
            </li>
            <li>
              <router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link>
            </li>
          </ul>
        </div>
        <!-- 投票数据 -->
        <div style="margin-top:20px;">
          <el-tabs v-model="tabname" @tab-click="tabChange">
            <el-tab-pane label="投票统计" name="chart">
              <canvas id="chart"></canvas>
            </el-tab-pane>
            <el-tab-pane label="投票日志" name="table">
              <el-table :data="logs">
                <el-table-column label="微信">
                  <template slot-scope="scope">
                    <div class="wx">
                      <img :src="scope.row.headimg" />
                      <p>{{maskName(scope.row.nickName)}}</p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="选手">
                  <template slot-scope="scope">
                    {{scope.row.playerSerial}}号
                    {{scope.row.playerName}}
                  </template>
                </el-table-column>
                <el-table-column label="IP" prop="ip"></el-table-column>
                <el-table-column label="地区">
                  <template slot-scope="scope">
                    <span>{{scope.row.province}}</span>
                    <span>{{scope.row.city}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="投票时间">
                  <template slot-scope="scope">
                    {{formatDate(scope.row.addtime)}}
                  </template>
                </el-table-column>
                <el-table-column label="票数">
                  <template slot-scope="scope">
                    {{scope.row.ticket}}
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination :page-size="pageSize" :pager-count="11" layout="prev, pager, next" @current-change="setPage" :total="recordCount"></el-pagination>

              <p class="foot_tip">只展示最近7天内数据，且数据量不超过10万条</p>
            </el-tab-pane>
          </el-tabs>
        </div>
      </center>
    </div>

    <Footer></Footer>
  </div>
</template>
<script>
import User from '../../utils/user'
import { Toast } from 'vant'
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import Chart from 'chart.js/auto'

export default {
  name: 'VoteData',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      actId: '',
      tabname: 'chart',
      page: 1,
      pageSize: 20,
      recordCount: 0,
      logs: [],
      chartData: [],
      chartLabs: [],
      lineChart: null,
      playerId: 0
    }
  },
  created() {
    if (!User.getToken() || !User.getInfo()) {
      this.$router.replace('/Login')
      return
    }
    if (this.$route && this.$route.query) {
      if (this.$route.query.code) {
        this.actId = this.$route.query.code
      }
      if (this.$route.query.player) {
        this.playerId = parseInt(this.$route.query.player)
      }
    }
    if (!this.actId) {
      this.$alert('参数错误')
      this.$router.back(-1)
      return
    }
    this.setTitle('投票日志')
    this.loadData()
  },
  mounted() {
    this.initChart()
  },
  destroyed() {
    if (this.lineChart) {
      this.lineChart.destroy()
    }
  },
  methods: {
    initChart() {
      var ctx2 = document.getElementById('chart')
      if (ctx2 && !this.lineChart) {
        this.chartLabs = []
        for (var n = 29; n >= 0; n--) {
          this.chartLabs.push(this.dateBefore(n))
        }

        this.lineChart = new Chart(ctx2, {
          type: 'line',
          data: {
            labels: this.chartLabs,
            datasets: [
              {
                label: '票数',
                backgroundColor: '#5cadff',
                borderColor: '#5cadff',
                borderWidth: 1,
                pointStrokeColor: '#fff',
                pointStyle: 'circle',
                data: this.chartData,
                cubicInterpolationMode: 'monotone'
              }
            ]
          },
          options: {
            plugins: {
              title: {
                display: false
              },
              legend: {
                display: false
              }
            }
          }
        })
      }
      if (this.lineChart) {
        this.lineChart.data.datasets[0].data = this.chartData
        this.lineChart.update()
      }
    },
    maskName(n) {
      if (n) {
        var s = n.substr(0, 1),
          e = n.substr(n.length - 1)
        return s + '*****' + e
      } else {
        return n
      }
    },
    dateBefore(n) {
      var date = new Date()
      var now = date.getTime() - n * 3600 * 24 * 1000
      date = new Date(now)
      return (
        date.getFullYear() +
        '-' +
        this.fill0(date.getMonth() + 1) +
        '-' +
        this.fill0(date.getDate())
      )
    },
    fill0(n) {
      return n > 9 ? n : '0' + n
    },
    tabChange() {},
    setPage(n) {
      this.page = n
      this.loadData()
    },
    loadData() {
      var date = new Date()
      var end = parseInt(date.getTime() / 1000 + 3600)
      var start1 = parseInt(date.getTime() / 1000) - 7 * 24 * 3600
      var start2 = parseInt(date.getTime() / 1000) - 30 * 24 * 3600

      Ajax.get('activity/vote/log/' + this.actId, {
        page: this.page,
        size: this.pageSize,
        start: start1,
        end: end,
        player: this.playerId
      })
        .then((res) => {
          if (res.code == 0) {
            this.logs = res.data.data
            this.recordCount = Math.min(res.data.recordCount, 100000)
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.error(err)
          this.$alert('获取数据失败')
        })

      Ajax.get('activity/vote/log/chart/' + this.actId, {
        start: start2,
        end: end,
        player: this.playerId
      })
        .then((res) => {
          if (res.code == 0) {
            this.chartData = []
            for (var i = 0; i < this.chartLabs.length; i++) {
              var d = res.data.filter((x) => x.date == this.chartLabs[i])
              if (d && d.length > 0) {
                this.chartData.push(d[0].ticket)
              } else {
                this.chartData.push(0)
              }
            }
            this.initChart()
          }
        })
        .catch((err) => {
          console.error(err)
        })
    }
  }
}
</script>

<style src="@/assets/css/manage.css"  scoped></style>
<style scoped>
.wx {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.wx img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-right: 10px;
}
#chart {
  width: 100%;
  height: 600px;
}
</style>